<template>
  <view class="bg-gray padding" style="min-height:100vh">
    <view v-if="currentTube">
      <view class="flex justify-between">
        <button class="cu-btn lg bg-blue" @click="onScanQR" style="background:#4b81ff;width:45%">
          <text class="cuIcon cuIcon-scan margin-right-xs"></text>
          <text>扫预约码</text>
        </button>
        <button class="cu-btn lg bg-green" @click="onFengGuan" style="background:#14cc9b;width:45%">
          <text class="cuIcon cuIcon-time margin-right-xs"></text>
          <text>封管</text>
          <text>({{list.length}})</text>
        </button>
      </view>

      <view class="padding-tb-sm text-gray">
        <text class="margin-right-sm">样本编号：</text>
        <text class="margin-right-sm">{{currentTube.qrcdoe}}</text>
      </view>

      <view style="width:100%;height:1px"></view>
      <view>
        <view v-for="(it,i) in list" :key="i" class="bg-white margin-top-sm" style="border-radius:2px">
          <view class="flex padding-tb-sm padding-lr justify-between" style="border-bottom:1px solid #e0e0e0">
            <text class="text-lg">{{it.name}}</text>
            <!-- <button @click="onRemoveItem(it)" class="cu-btn text-red sm" style="background:#fee8e7">
              <text class="cuIcon cuIcon-delete margin-right-xs"></text>
              <text>删除</text>
            </button> -->
          </view>
          <view class="padding-tb-sm padding-lr text-gray" style="line-height:1.5">
            <view>
              <text>床位号：</text>
              <text>{{it.cwdm}}</text>
            </view>
            <view>
              <text>科室：</text>
              <text>{{it.dept_name}}</text>
            </view>
            <view>
              <text>检测时间：</text>
              <text>{{fmtDate(it.scan_time)}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-else class="padding-xl text-center">
      <button @click="onScanTube" class="cu-btn lg bg-blue">
        <text class="cuIcon cuIcon-scan margin-right-xs"></text>
        <text>扫码取管</text>
      </button>
    </view>

  </view>
</template>

<script>
import moment from 'moment'
import CheckAuthMixin from '@/mixins/CheckAuthMixin'
import PayMixin from '@/mixins/PayMixin'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import consts from '@/shared/consts'

const KEY_TUBE = 'current_tube'

export default {
  mixins: [
    CheckAuthMixin,
    PayMixin,
  ],
  components: {
    uniPopup,
  },
  data() {
    return {
      labelStyles: {
        minWidth: '80px',
        textAlign: 'justify',
        paddingRight: '30upx',
        fontSize: '30upx',
        color: 'inherit',
      },
      loading: false,
      list: 
        // Object.keys([...new Array(6)]).map(i => {
        //   return {

        //   }
        // }),
        [],
      currentTube: null,
    }
  },
  watch: {
    loading(val) {
      if (val) {
        uni.showLoading()
      } else {
        uni.hideLoading()
      }
    },
  },
  onLoad(opts) {
    this.onChangeTube()
    if (this.currentTube) {
      this.getList()
    }
  },
  mounted() {
  },
  methods: {
    fmtDate(st) {
      return moment(st).format('YYYY-MM-DD HH:mm:ss')
    },
    onChangeTube(e) {
      if (e) {
        uni.setStorageSync(KEY_TUBE, e.detail.value)
      }
      this.currentTube = uni.getStorageSync(KEY_TUBE)
    },
    getList() {
      this.$http({
        url: `/api/InHospital/samplecollectinpat?sample_id=${this.currentTube.sample_id}`,
        method: 'POST',
        success: (res) => {
          if (res.success) {
            // cwdm: "46"
            // dept_name: "手一科"
            // name: "工"
            // scan_time: "2022-05-21T10:25:21.337"
            this.list = res.data
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        }
      })
    },
    onFengGuan() {
      this.$http({
        url: `/api/InHospital/sample_end?sample_id=${this.currentTube.sample_id}`,
        method: 'POST',
        success: (res) => {
          if (res.success) {
            uni.showModal({
              title: '已封管',
              showCancel: false
            })
            this.clearTube()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            this.clearTube()
          }
        }
      })
    },
    clearTube() {
      uni.setStorageSync(KEY_TUBE, null)
      this.onChangeTube()
      this.list = []
    },
    onScanQR() {
      if (process.env.NODE_ENV != 'production') {
        const text = consts.testOrder
        this.$http({
          url: `/api/InHospital/samplecollectinpat?sample_id=${this.currentTube.sample_id}&orders_id=${text}`,
          method: 'POST',
          success: (res) => {
            if (res.success) {
              this.getList()
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
            }
          }
        })
      } else {
        this.scanQR((text) => {
          this.$http({
            url: `/api/InHospital/samplecollectinpat?sample_id=${this.currentTube.sample_id}&orders_id=${text}`,
            method: 'POST',
            success: (res) => {
              if (res.success) {
                this.getList()
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                })
              }
            }
          })
        })
      }
    },
    onRemoveItem(it) {
      uni.showModal({
        title: '确认删除',
        success: function (res) {
          if (res.confirm) {
            
          }
        }
      })
    },
    onScanTube() {
      if (process.env.NODE_ENV != 'production') {
        const text = consts.testTube
        this.$http({
          url: `/api/InHospital/SampleStatus?qrcode=${text}`,
          header: {
            'token': this.user.token,
          },
          method: 'POST',
          success: (res) => {
            if (res.success) {
              // qrcdoe: "12345"
              // sample_id: 14
              const { qrcdoe, sample_id } = res.data
              const currentTube = {
                qrcdoe: qrcdoe.replace('CODE_', ''),
                sample_id,
              }
              if (currentTube.sample_id == '0') {
                uni.showModal({
                  title: '已封管',
                  showCancel: false
                })
              } else {
                this.onChangeTube({
                  detail: {
                    value: currentTube
                  }
                })
                this.getList()
                uni.showToast({
                  title: '取管成功',
                })
              }
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
            }
          }
        })
      } else {
        this.scanQR((text) => {
          this.$http({
            url: `/api/InHospital/SampleStatus?qrcode=${text}`,
            header: {
              'token': this.user.token,
            },
            method: 'POST',
            success: (res) => {
              if (res.success) {
                // qrcdoe: "12345"
                // sample_id: 14
                const { qrcdoe, sample_id } = res.data
                const currentTube = {
                  qrcdoe: qrcdoe.replace('CODE_', ''),
                  sample_id,
                }
                if (currentTube.sample_id == '0') {
                  uni.showModal({
                    title: '已封管',
                    showCancel: false
                  })
                } else {
                  this.onChangeTube({
                    detail: {
                      value: currentTube
                    }
                  })
                  this.getList()
                  uni.showToast({
                    title: '取管成功',
                  })
                }
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                })
              }
            }
          })
        })
      }
    },
  },
}
</script>

<style scoped>
.bg-cus-blue {
  background: #3182F8;
}
.nav-cus {
  text-align: center;
  padding: 12px;
  font-size: 16px;
  position: relative;
}
.nav-cus.active {
  color: #3182F8;
}
.nav-cus.active::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: #3182F8;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,0);
}
.tag-btn {
  margin-left: auto;
  color: #3182F8;
  background: #ebf3fe;
  padding: 5px 10px;
  border-radius: 50px;
  white-space: nowrap;
}
.display-qr {
  position: absolute;
  right: 10px;
  top: 20px;
}
.qr {
  width: 40px;
  height: 40px;
  background: green;
  margin: 0 auto 5px;
}
</style>